$(function() {
    var form = layui.form
    var id
    var index
    var fd
    var files

    // 1.调用接口，渲染表格数据
    function renderCate_szj() {
        $.ajax({
            url: '/admin/links',
            method: 'GET',
            success: function(res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }

                // 调用模板，渲染页面
                var htmlStr = template('list-tpl', res)
                $('tbody').html(htmlStr)
            }
        })
    }

    renderCate_szj()

    // 2.给每个删除按钮绑定点击事件，删除数据
    $(document).on('click', '.del-btn', function() {
        // 获取自定义id值
        id = $(this).data('id')

        // 弹出询问框
        layer.confirm('是否确认删除?', { icon: 3, title: '提示' }, function(index) {
            $.ajax({
                url: '/admin/links/' + id,
                method: 'DELETE',
                success: function(res) {
                    if (res.status != 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg('删除成功!')

                    renderCate_szj()
                }
            })
            layer.close(index)
        })
    })

    // 3.点击添加按钮，新增一条分类数据
    $('#add-link').click(function() {
        index = layer.open({
            type: 1,
            title: '添加链接',
            content: $('#add-form-tpl').html(),
            area: ['500px', '400px']
        })

        // 选择上传图片
        $(document).on('click', '#urlIcon', function() {
            $('#linkFile').click()
        })

        $('#linkFile').change(function(e) {
            const newImg = URL.createObjectURL(e.target.files[0])
            $('#preIcon').attr('src', newImg)
        })

        // 提交表单
        $('#add-form').submit(function(e) {
            e.preventDefault()
            fd = new FormData(this)

            $.ajax({
                url: '/admin/links',
                method: 'POST',
                data: fd,
                contentType: false,
                processData: false,
                success: function(res) {
                    if (res.status != 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg('添加链接成功!')
                    layer.close(index)
                    renderCate_szj()
                }
            })
        })
    })

    // 4.编辑链接
    $(document).on('click', '.edit-btn', function() {
        // 弹出框
        index = layer.open({
            type: 1,
            title: '编辑友情链接',
            content: $('#edit-form-tpl').html(),
            area: ['500px', '400px']
        })

        id = $(this).data('id')

        // 获取表单数据
        $.ajax({
            url: '/admin/links/' + id,
            method: 'GET',
            success: function(res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }

                // 给表单赋值
                form.val('editForm', res.data)

                // 先获取图片的地址值
                $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
                delete res.data.linkicon

                $('#linkFile').change(function() {
                    files = this.files
                    if (files.length == 0) return

                    const newImg = URL.createObjectURL(this.files[0])
                    $('#preIcon').attr('src', newImg)
                })

                // 选择上传图片
                $('#urlIcon').click(function() {
                    $('#linkFile').click()
                })

                // 编辑链接提交事件
                $('#edit-form').submit(function(e) {
                    e.preventDefault()


                    fd = new FormData(this)
                    fd.append('linkicon', files[0])

                    $.ajax({
                        url: '/admin/links/' + id,
                        method: 'PUT',
                        data: fd,
                        contentType: false,
                        processData: false,
                        success: function(res) {
                            if (res.status != 0) {
                                return layer.msg(res.message)
                            }
                            layer.msg('更新信息成功!')

                            renderCate_szj()
                            layer.close(index)
                        }
                    })
                })


            }
        })

    })

























































})